﻿@import "../../styles/mixins/utils";
@import "../../styles/mixins/vars";

/**
单选按钮组件
 */
.radio-group {
    .radio-icon {
        display: inline-block;
        position: relative;
        @include width-height(20);
        transition: all 120ms ease-in-out;
        margin-right: $d1;
        cursor: pointer;
        border-radius: 50%;
        border: solid 1px #ccc;
        background-color: #fff;
        &:after {
            @include middle-center();
            content: ' ';
            display: inline-block;
            @include width-height(10);
            border-radius: 50%;
        }
    }

    .radio-button {
        label {
            display: inline-flex;
            align-items: center;
            height: $form-item-height;
        }
        &.checked {
            .radio-icon {
                border-color: $primary;
                background-color: $primary;
                &:after {
                    background-color: #fff;
                }
            }

        }
        margin-right: $d2;

    }

    &.inline {
        display: flex;
        flex-wrap: wrap;
        justify-items: center;
    }
}

/**
 颜色主题
 */
@each $color, $value in $themes-colors {
    .radio-#{$color} {
        .checked {
            .radio-icon {
                background-color: $value !important;
            }
        }
    }
}
